<template>
	<nav>
		<h1>课程页面</h1>
		<ul>
			<li v-for="c in courseList" :key="c.id">
				<!-- query传参: 方式一  字符串 /test?name=zhangsan&age=20-->
				<!-- <router-link :to="`/test?name=${c.name}`">{{c.name}}</router-link> -->
				<!-- query传参: 方式二 对象 -->
				<!-- <router-link :to="{
					               path:'/test',
							       query:{
									   name:c.name
								   }
							  }">{{c.name}}</router-link> -->
				<!-- ################################################################ -->
				<!-- 
				    1.params传参: 方式一  字符串 /test/zhangsan/20
				    2.路由规则path中添加占位符:path: '/test/:name/:id'
				-->
				<!-- <router-link :to="`/test/${c.name}/${c.id}`">{{c.name}}</router-link> -->
				<!-- 
				    1.params传参: 方式二 对象 
					2.name的值必须是路由规则名称
				    3.路由规则path中添加占位符:path: '/test/:name/:id'	
				-->
				<!-- <router-link :to="{
			    	               //path:'/test', 不能是路径
								   name: 'Test', //此处必须是路由规则名称
			    			       params:{
			    					   name:c.name,
									   id:c.id
			    				   }
			    			  }">{{c.name}}</router-link>
				<button @click="testPush(c.name,c.id)">{{c.name}}</button>
				<button @click="testReplace(c.name,c.id)">{{c.name}}--Replace</button> -->
			</li>
			<router-link to="/html">html</router-link> |
			<router-link to="/css">css</router-link> |
			<button @click="testGO()">go</button>
			<button @click="testBack()">back</button>
		</ul>

		<router-view></router-view>
	</nav>
</template>

<script>
	export default {
		name: 'Course',
		data() {
			return {
				courseList: [{
						id: 1,
						name: 'HTML'
					},
					{
						id: 2,
						name: 'CSS'
					},
					{
						id: 3,
						name: 'JQUERY'
					}
				]
			}
		},
		mounted() {
			console.log(this);
			console.log(this.$router);
		},
		methods: {
			testReplace(name, id) {
				this.$router.replace({
					path: '/test',
					query: {
						name,
						id
					}
				})
			},

			testPush(name, id) {
				this.$router.push({
					path: '/test',
					query: {
						name,
						id
					}
				})
			},
			testGO() {
				this.$router.go(1);
			},
			testBack() {
				this.$router.back();
			}
		}
	}
</script>

<style scoped>
	li {
		list-style: none;
	}
</style>
